<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>接口测试页</title>
</head>

<body>
    <div id="app">
        <p>用户模块</p>
        <input type="button" value="注册" @click="testUserRegister">
        <input type="button" value="登录" @click="testUserLogin">
        <input type="button" value="编辑" @click="testUserEdit">
        <input type="button" value="注销" @click="testUserLogout">
        <p>混合功能</p>
        <input type="button" value="搜索" @click="testSearchUserAndGoods">
        <p>商品模块</p>
        <input type="button" value="添加" @click="testAddGoods">
        <input type="button" value="修改" @click="testEditGoods">
        <input type="button" value="移除" @click="testRemoveGoods">
    </div>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.config.productionTip = false
        var vue = new Vue({
            el: '#app',
            data: {
                // 用户注册表单对象
                userRegisterForm: {
                    username: '二手电视专卖',
                    password: '123456',
                    phone: '13999999999',
                    gender: 'female'
                },
                // 用户登录表单对象
                userLoginForm: {
                    username: '二手外设专卖',
                    password: '123456789'
                },
                // 编辑用户表单
                // 表单验证在前端完成,username,password,phone不能为空
                userEditForm: {
                    // _id在调用编辑方法时会赋值，这里不要赋值
                    _id: '',
                    username: '二手外设专卖',
                    password: '123456789',
                    phone: '18569638347',
                    gender: 'male',
                    realName: '二蛋',
                    class: '挖矿1班',
                    sno: '2015153',
                    dormitory: '12150',
                    avatar: '',
                },
                // 搜索用户和商品表单
                searchUserAndGoodsForm: {
                    queryParam: '二手外设专卖',
                },
                // 添加商品表单
                addGoodsForm: {
                    goodsName: '小米21',
                    // 0~10 成色输入框为数字类型 10为全新
                    level: 10,
                    remark: '2025年最新购入，自用小米20，95新',
                    price: 100,
                    // 数字对应分类，前端填写分类名称，需要做判断，将分类名称对应的数字传给后端。或者传分类名称到后端，后端做判断
                    sort: 1,
                    // 数量
                    count: 1,
                    // 是否禁用
                    display: false,
                    // 交易方式
                    transaction: '线下',
                    // 商品所属用户的id
                    uid: '',
                    // 商品图片地址
                    image: '/image'
                },
                // 修改商品表单
                // 进入商品修改页时，在表单输入框中会显示当前商品信息
                // 因为要用到旧的商品名作查询条件，所以要在修改商品名表单之前将旧的商品名存储在表单对象中，同时在商品名修改完成后要将新商品名存储在表单对象中。最后一并发给后端。可在mount钩子中保存旧的商品名，判断是否修改完成可用表单的change事件
                editGoodsForm: {
                    oldGoodsName: '小米21',
                    newGoodsName: '小米21',
                    level: 10,
                    remark: '2025年最新购入，自用小米20，95新',
                    price: 100,
                    sort: 1,
                    count: 1,
                    display: false,
                    transaction: '线下',
                    // 商品所属用户的id,无法更改，也不显示，传给后台用作匹配后台数据
                    uid: '',
                    image: '/image'
                },
                // 移除商品表单
                // 移除商品只需将商品名与用户id传过去即可
                removeGoodsForm: {
                    goodsName: '小米21',
                    uid: ''
                }
            },
            methods: {
                // 获取sessionStorage中的用户信息
                getUserInfoFromSessionStorage() {
                    let userInfo = JSON.parse(window.sessionStorage.getItem("es-Back-userInfo"))
                    this.userEditForm._id = userInfo._id;
                    for (item in this.userEditForm) {
                        // 不需更改的，取sessionStorage中的用户信息，防止误更改数据成空值
                        if (!this.userEditForm[item]) {
                            this.userEditForm[item] = userInfo[item]
                            console.log(item);
                        }
                    }
                },
                // 注册也就是要添加用户
                async testUserRegister() {
                    const {
                        data: res
                    } = await axios.post('http://localhost:3000/user/register', this.userRegisterForm)
                    if (res.meta.code !== 200) return console.log(res);
                    alert('ok')
                    console.log(res);
                },
                // 登录
                async testUserLogin() {
                    const {
                        data: res
                    } = await axios.post('http://localhost:3000/user/login', this.userLoginForm)
                    if (res.meta.code !== 200) return console.log(res);
                    alert('ok')
                    console.log(res);
                    // console.log(JSON.stringify(res.data));
                    // 登录成功之后将用户信息存储到sessionStorage中，以便日后使用
                    window.sessionStorage.setItem("es-Back-userInfo", JSON.stringify(res.data))
                        // console.log(window.sessionStorage.getItem("es-Back-userInfo"));
                },
                // 编辑
                async testUserEdit() {
                    this.getUserInfoFromSessionStorage()
                    const {
                        data: res
                    } = await axios.post('http://localhost:3000/user/edit', this.userEditForm)
                    if (res.meta.code !== 200) return console.log(res);
                    alert('ok')
                    console.log(res);
                    // JSON.stringify对象转成字符串, parse字符串转为对象 stringify: 字符串化
                    // console.log(JSON.stringify(res.data));
                    // 修改成功后返回修改之后的用户信息
                    window.sessionStorage.setItem("es-Back-userInfo", JSON.stringify(res.data))
                        // console.log(window.sessionStorage.getItem("es-Back-userInfo"));
                },
                // 搜索用户和商品
                async testSearchUserAndGoods() {
                    // 注意get参数的传递方式 { params: this.userInfo} 像post那样直接传this.userInfo 后台接收不到
                    const {
                        data: res
                    } = await axios.get('http://localhost:3000/mixRouter/search', {
                        params: this.searchUserAndGoodsForm
                    })
                    if (res.meta.code !== 200) return console.log(res);
                    alert('ok');
                    console.log(res);
                },
                // 注销
                async testUserLogout() {
                    const {
                        data: res
                    } = await axios.get('http://localhost:3000/user/logout')
                    if (res.meta.code !== 200) return console.log(res);
                    alert('ok')
                        // 前端在注销成功后，返回code为200时清除sessionStorage中的esBackUserInfo
                    window.sessionStorage.removeItem("es-Back-userInfo")
                    console.log(res);
                },
                // 添加商品
                // 同一用户不能有名称重复的商品, 不同用户才能有名称重复的商品
                async testAddGoods() {
                    this.addGoodsForm.uid = JSON.parse(window.sessionStorage.getItem("es-Back-userInfo"))._id
                        // console.log(this.addGoodsForm.uid);
                    const {
                        data: res
                    } = await axios.post('http://localhost:3000/goods/add', this.addGoodsForm)
                    if (res.meta.code !== 200) return console.log(res);
                    alert("ok");
                    console.log(res);
                },
                // 修改商品
                async testEditGoods() {
                    // 进入商品修改页时，在表单输入框中会显示当前商品信息，可以取出当前商品的商品名，再将数据库中商品的uid与sessionStorage中的用户id是否匹配，只修改商品名和uid匹配的数据
                    let userInfo = JSON.parse(window.sessionStorage.getItem("es-Back-userInfo"))
                        // 前端到时候要做验证，商品信息表单不能为空
                    this.editGoodsForm.uid = userInfo._id;
                    const {
                        data: res
                    } = await axios.post('http://localhost:3000/goods/edit', this.editGoodsForm)
                    if (res.meta.code !== 200) return console.log(res);
                    alert("ok");
                    console.log(res);
                },
                // 移除商品
                async testRemoveGoods() {
                    // 进入商品修改页时，在表单输入框中会显示当前商品信息，可以取出当前商品的商品名，再将数据库中商品的uid与sessionStorage中的用户id是否匹配，只修改商品名和uid匹配的数据
                    let userInfo = JSON.parse(window.sessionStorage.getItem("es-Back-userInfo"))
                        // 前端到时候要做验证，商品信息表单不能为空
                    this.removeGoodsForm.uid = userInfo._id;
                    const {
                        data: res
                    } = await axios.post('http://localhost:3000/goods/remove', this.removeGoodsForm)
                    if (res.meta.code !== 200) return console.log(res);
                    alert("ok");
                    console.log(res);
                }
            }
        })
    </script>
</body>

</html>